<template>
  <div id="add">
      <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>修改</span>
       <el-button style="float: right; padding: 3px 0" type="text" @click="goback">返回上一级</el-button>
  </div>
  <el-form :model="ruleForm" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="Name" prop="Name">
    <el-input  v-model="ruleForm.Name" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="Type" prop="Type">
    <el-input  v-model="ruleForm.Type" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="Time" prop="Time">
    <el-input v-model="ruleForm.Time"></el-input>
  </el-form-item>
  <el-form-item label="Data" prop="data">
    <el-input v-model.number="ruleForm.data"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="updatetrend()">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
</el-card>
  </div>

</template>

<script>
export default {
     data() {
      return {
          
        ruleForm: {
            id: '',
          Name: '',
          Type: '',
          Time: '',
          data: ''
        },
        Index: ''

      };
    },
    created(){
        this.getdata()
    },
    methods: {
        getdata(){
            this.Index=this.$route.params.index,
        this.ruleForm=this.$store.state.totrendData[this.Index]
        
        },
        updatetrend(){
            console.log("id",this.ruleForm.id)
            console.log( "data",this.ruleForm)
            this.$store.dispatch("updatetrend",{id:this.ruleForm.id,data:this.ruleForm})
        this.$message({
          message: '恭喜你，修改好一条数据',
          type: 'success'
        });
        this.$router.go(-1);
        },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      goback(){
            this.$router.go(-1);
      }
    }
  }
</script>

<style  scoped>
#add{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
}
 .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 800px;
  }

</style>
